<template>
  <div>
    <div class="hearder">
      <tiny-layout class="tiny-layout-tag1">
        <tiny-row style="height: 40px; line-height: 45px">
          <tiny-col :span="12"><span class="title">运行报表</span> </tiny-col>
        </tiny-row>
        <tiny-row tag="span" class="harder-info">
          <tiny-col :span="4">
            <div class="col">
              <tiny-row style="background-color: #00c0ef">
                <div style="display: flex">
                  <div class="icon-bg"><yu-icon class="icon" iconName="renwuxiangqing"></yu-icon></div>
                  <div style="width: 100%">
                    <div class="title-info" style="height: 30px; line-height: 30px; width: 100%">任务数量
                      <span>{{ data.card.task }}</span>
                    </div>
                    <div style="background: #ffffff; height: 2px"></div>
                    <div class="title-info" style="height: 25px">调度中心运行的任务数量</div>
                  </div>
                </div>
              </tiny-row>
            </div>
          </tiny-col>
          <tiny-col :span="4">
            <div class="col">
              <tiny-row style="background-color: #f39c12">
                <div style="display: flex">
                  <div class="icon-bg"><yu-icon class="icon" iconName="renwuxiangqing"></yu-icon></div>
                  <div style="width: 100%">
                    <div class="title-info" style="height: 30px; line-height: 30px; width: 100%">调度次数
                      <span>{{ data.card.schedulingTimes }}</span>
                    </div>
                    <div style="background: #ffffff; height: 2px"></div>
                    <div class="title-info" style="height: 25px">调度中心触发调度的次数</div>
                  </div>
                </div>
              </tiny-row>
            </div>
          </tiny-col>
          <tiny-col :span="4">
            <div class="col">
              <tiny-row style="background-color: #00a65a">
                <div style="display: flex">
                  <div class="icon-bg"><yu-icon class="icon" iconName="renwuxiangqing"></yu-icon></div>
                  <div style="width: 100%">
                    <div class="title-info" style="height: 30px; line-height: 30px; width: 100%">执行器数量
                      <span>{{ data.card.executor }}</span>
                    </div>
                    <div style="background: #ffffff; height: 2px"></div>
                    <div class="title-info" style="height: 25px">调度中心在线的执行机器数量</div>
                  </div>
                </div>
              </tiny-row>
            </div>
          </tiny-col>
        </tiny-row>
      </tiny-layout>
    </div>

    <tiny-layout>
      <tiny-row>
        <tiny-col :span="8">
          <tiny-chart-line :data="data.left.chartData" :extend="data.left.extend"
            :settings="data.left.chartSettings"></tiny-chart-line>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-chart-pie :data="data.right.chartData" :colors="data.right.colors"
            :settings="data.right.chartSettings"></tiny-chart-pie>
        </tiny-col>
      </tiny-row>
    </tiny-layout>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
let { proxy } = getCurrentInstance();
const data = reactive(
  {
    card: { task: 0, ScheTimes: 0, exector: 0 },
    left: { chartData: {}, colors: [], extend: {}, chartSettings: {}, open },
    right: { chartData: {}, colors: [], chartSettings: {} }
  }
);
data.left.chartData = {
  columns: ['日期', '成功', '失败', '进行中'],
  rows: [
    { 日期: '2024-01-02', 成功: 1393, 失败: 1093, 进行中: 800 },
    { 日期: '2024-01-03', 成功: 3530, 失败: 3230, 进行中: 800 },
    { 日期: '2024-01-04', 成功: 2923, 失败: 2623, 进行中: 800 },
    { 日期: '2024-01-05', 成功: 1723, 失败: 1423, 进行中: 800 },
    { 日期: '2024-01-06', 成功: 3792, 失败: 3492, 进行中: 800 },
    { 日期: '2024-01-07', 成功: 4593, 失败: 4293, 进行中: 800 },
  ],
};
onMounted(()=>{
  queryReport()
})
const queryReport = ()=>{
  let params = {"type":"6"}
  proxy.$api.taskJob.chartInfo(params).then(res => {
      console.log(res)
      data.card=res.card
       data.left.chartData.rows=res.leftCharts
       data.left.chartData.columns=['日期', '成功', '失败', '进行中']
       data.right.chartData.rows=res.rightCharts
       data.right.chartData.columns = ['状态', '数量']
    });
}
data.left.chartSettings = {
  type:'line',
  stack: { 用户: ['成功', '失败', '进行中'] },
  area: false,
  seriesMap: {
    colors: ['red', 'green', 'yellow'],
  },
};
data.right.chartData = {
  columns: ['状态', '数量'],
  rows: [
    { 状态: '成功', 数量: 1393 },
    { 状态: '失败', 数量: 3530 },
    { 状态: '进行中', 数量: 2923 },
  ],
};
data.right.chartSettings = {};
data.right.colors = ['green', 'red', 'yellow'];
</script>
<style lang="scss" scoped>
.hearder {
  height: 100px;

  .title {
    font-size: 20px;
  }

  .harder-info {
    height: 80px;

    .col {
      height: 80px;

      .icon-bg {
        color: #ffffff;
        background: rgba(0, 0, 0, 0.2);
      }

      .col-icon {
        width: 80px;
      }

      .title-info {
        font-size: 12px;

        color: #ffffff;
      }
    }
  }
}

.icon {
  font-size: 60px;
}</style>
